<template>
	<div v-if="isshow" id="alert">
		<div v-if="type == 1" class="alert">
			<img v-if="alertType == 1" src="./alert-succ.png"/>
			<img v-else-if="alertType == 2" src="./alert-error.png"/>
			<img v-else-if="alertType == 3" src="./alert-warning.png"/>
			<div class="alert_content">
				{{content}}
			</div>
			<input id="alert_confirm" @click="AlertSure" type="button" value="确定" />
		</div>
		<div v-else-if="type == 2" class="confirm">
			<h3>{{title}}</h3>
			<div class="confirm_content">
				{{content}}
			</div>
			<div class="confirm_btns">
				<input @click="close" type="button" value="取消" />
				<input id="determine" @click="Determine" type="button" value="确定" />
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'alert',
	data:function(){
		return{
			isshow: false,
			type: 1,//弹窗类型
			alertType: 1,//alert类型
			title: '',
			content: '',
		}
	},
	methods:{
		close:function(){
			this.isshow = false;
		},
		AlertSure:function(){
			this.alertSure();
			this.isshow = false;
		},
		Determine:function(){
			this.confirmSure();
			this.isshow = false;
		}
	}
}
</script>

<style>
#alert{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 11;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}
/*---------alert-----------*/
.alert{
	width: 350px;
	border-radius: 5px;
	background-color: #FFFFFF;
	padding: 20px 40px;
	box-sizing: border-box;
	margin-top: -10%;
}
.alert img{
	height: 40px;
	display: block;
	margin: 0 auto;
}
.alert_content{
	text-align: center;
	color: #545454;
	font-size: 14px;
	margin: 20px 0;
}
.alert input{
	width: 70px;
	display: block;
	margin: 0 auto;
	background-color: #FF464E;
	height: 24px;
	color: #FFFFFF;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	letter-spacing: 10px;
	padding-left: 10px;
	box-sizing: border-box;
}
/*---------confirm------------*/
.confirm{
	width: 350px;
	border-radius: 5px;
	background-color: #FFFFFF;
	padding: 30px 40px;
	box-sizing: border-box;
	margin-top: -10%;
}
.confirm h3{
	font-size: 16px;
	color: #FF464E;
	text-align: center;
}
.confirm_content{
	font-size: 14px;
	text-align: center;
	margin: 20px 0;
	color: #545454;
}
.confirm_content span{
	color: #FF464E;
}
.confirm_btns{
	display: flex;
	justify-content: center;
	align-items: center;
}
.confirm_btns input:first-child{
	width: 70px;
	height: 24px;
	background-color: #FFFFFF;
	color: #9F9F9F;
	border: 1px solid #E6E6E6;
	border-radius: 3px;
	font-size: 14px;
	margin-right: 10px;
	letter-spacing: 10px;
	padding-left: 10px;
	box-sizing: border-box;
}
.confirm_btns input:last-child{
	width: 70px;
	height: 24px;
	background-color: #FF464E;
	color: #FFFFFF;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	letter-spacing: 10px;
	padding-left: 10px;
	box-sizing: border-box;
}
</style>
